<template>
  <div>
  <div class="main scrollY" v-if="pageShow">
    <ul>
      <li class="hairline-top hairline-bottom content" >
        <template v-if="addPhotosParame.content.length!=0 || issuePlaceholder">
        </template>
        <template v-else>
          <div class="issue-placeholder" v-if="!addPhotosParame.subjectId">
            <p>请在这里写下您发现的事儿...</p>

            <p>如果是举报事件，将由客服负责联系相关部门进行处理；</p>

            <p>如果是符合社会主义核心价值观的事件，将由客服推荐到最美门城版块公示；</p>

            <p>如果是利于和谐有社会警示作用的事件，将由客服推荐到社会警示版块公示。</p>
          </div>
          <div class="issue-placeholder pre-wrap" v-else v-html="hint"></div>
        </template>
        <textarea   v-model="addPhotosParame.content" maxlength="200"  @input="placeholder(true)"  @change="placeholder(true)"    @focus="placeholder(true)"  @blur="placeholder(false)"></textarea>
        <span>{{addPhotosParame.content | textLength }}/200</span>
      </li>
      <li class="hairline-top hairline-bottom ">
        <div class="photos">
            <span class="photo" v-for="(item,index) in  addPhotosParame.basePhotos"
                  :style="'background-image:url('+item.fileUrl+')'"   @click.stop="bigImg( index )"
                  :class="{ 'mask':item.mask}"
            >
            <i  @click.stop = "delPhoto( index )" class="icon icon-delphoto"></i>
          </span>
          <span  v-if="addPhotosParame.basePhotos.length<6" class="photo icon icon-add" @click="toonOpenCamera()"></span>
        </div>
      </li>
      <li class="hairline-top hairline-bottom location">
        <p @click="toonMAP" class="SL">
          <span class="info">位置</span>
          <span class="info" v-if="!addPhotosParame.location"  >请选择</span>
          <span >{{addPhotosParame.location}}</span>
          <i class="icon icon-arrow-right"></i>
        </p>
      </li>
    </ul>
    <div class="btn-issue" @click = "issue">
      <p >发布</p>
    </div>

  </div>
    <!--放大图片-->
    <img-view :photoList="addPhotosParame.basePhotos" :curIndex="curPhotoIndex" v-model="imgSwitch" @reset="reset"></img-view>
</div>
</template>
<script>
  import index from  "./issue.js"
  export default index ;
</script>
<style scoped>

  .issue-placeholder{left:0 ;top:0; padding: 15px ; box-sizing:border-box; font-size:15px; position: absolute ; color: #8E8E93}
  .issue-placeholder p{ padding-bottom:8px;line-height:17px; }
  .main{position:absolute;width:100%;height:100%}
  li{box-sizing:border-box;list-style:none;position:relative;background:#fff;font-size:15px;margin-top:12px;width:100%;padding:15px}
  li textarea{box-sizing:border-box; width:100%;font-size:15px;line-height:17px;height:158px ;left:0 ;top:0;position: absolute ;padding: 15px 15px 0; }
  li.content{position:relative ;height:197px ; }
  li.content span{position:absolute;bottom:15px;right:15px;font-size:14px;color:#8E8E93}
  .photos{margin-right:-15px}
  .photo{position:relative;display:inline-block;width:80px;height:80px;background:#eee;margin-right:8px;background-position:center;background-size:cover}
  .photo i.icon-delphoto{position:absolute;background-image:url(../../../assets/img/icon/icon-delPhoto.png);
    top:5px;right:5px;width:23px;height:23px;border-radius:50%
  }
  .photo i.icon-delphoto:before{
    position: absolute;
    top:-5px;right:-5px;
    content: "";width:30px;height:30px; }
  .photo.icon-add{background-image:url(../../../assets/img/icon/icon-add.png)}
  .location{line-height:44px;padding-top:0;padding-bottom:0}
  .location p {width: 330px}
  .location .info{font-family:STHeitiSC-Light;font-size:15px;color:#8E8E93;margin-right:15px}
  .location .icon-arrow-right{position:absolute;top:50%;right:15px;transform:translateY(-50%);-webkit-transform:translateY(-50%);width:6px;height:10px}
  .btn-issue{text-align:center}
  .btn-issue p{background:#DF3031;border-radius:4px;text-align:center;color:#fff;font-size:17px;width:345px;line-height:44px;display:inline-block;margin-top:30px}
  .btn-convphoto-list{margin-top:15px;text-align:center;color:#000;font-size:14px;  margin-bottom: 35px }
  .btn-convphoto-list a{ padding:0 20px ;padding-bottom:10px ;}
  .mask{position: relative; background-color: #000 ; opacity: 0.8}
  .mask:before{position: absolute ;content: "" ;opacity: 0.8;  width: 100% ; height: 100%;top:0;left: 0;   background-color: #000}
</style>
